<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>role-list</title>
	<meta name="renderer" content="webkit">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="/lib/layuimini2/lib/layui/css/layui.css" media="all">
	<link rel="stylesheet" href="/lib/layuimini2/css/public.css" media="all">
	<link rel="stylesheet" href="/css/common.css" media="all">
	<style type="text/css">
		#homeForm .layui-table-main td {
			cursor: pointer !important;
		}
	</style>
</head>
<body>
<div class="layuimini-container">
	<div class="layuimini-main">

		<fieldset class="table-search-fieldset">
			<legend>搜索信息</legend>
			<div style="margin: 10px 10px 10px 10px">
				<form class="layui-form layui-form-pane" action="">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">名称</label>
							<div class="layui-input-inline">
								<input type="text" name="roleName" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<button type="submit" class="layui-btn layui-btn-primary" lay-submit
							        lay-filter="data-search-btn"><i class="layui-icon layui-icon-search"></i> 搜 索
							</button>
							<button type="button" class="layui-btn layui-btn-normal" id="add"><i
									class="layui-icon layui-icon-add-1"></i>添加
							</button>
						</div>
					</div>
				</form>
			</div>
		</fieldset>

		<table class="layui-hide" id="dataTableId" lay-filter="dataTableFilter"></table>

		<script type="text/html" id="dataTableBar">
			<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="home">首页</a>
			<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="menu">分配菜单</a>
			<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="resource">分配权限</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
		</script>

	</div>
</div>
<form class="layui-form layui-form-pane" id="layerForm" lay-filter="dataForm" style="display: none;padding:5px">
	<input type="hidden" name="id" class="id"/>
	<div class="layui-form-item" widthoffset="10">
		<div class="layui-inline">
			<label class="layui-form-label required">名称</label>
			<div class="layui-input-block  col12">
				<input type="text" name="roleName" lay-verify="required" lay-reqtext="角色名不能为空"
				       placeholder="请输入角色名" value="" class="layui-input">
			</div>
		</div>
	</div>

	<div class="layui-form-item">
		<div class="layui-input-block col12">
			<textarea name="remark" class="layui-textarea" placeholder="请输入备注"></textarea>
		</div>
	</div>

	<div class="layui-form-item btns">
		<div class="layui-input-block">
			<button id="submitBtn" class="layui-btn layui-btn-radius" lay-submit lay-filter="layerForm">确定</button>
			<button class="layui-btn layui-btn-radius layui-btn-primary cancel" type="button">取消</button>
		</div>
	</div>
</form>

<form class="layui-form layui-form-pane" id="permissionForm" style="display: none;padding:5px">
	<input type="hidden" name="id" class="id"/>
	<div id="dataTree"></div>
	<div class="layui-form-item btns">
		<div class="layui-input-block">
			<button class="layui-btn layui-btn-radius" lay-submit lay-filter="permissionForm">确定</button>
			<button class="layui-btn layui-btn-radius layui-btn-primary cancel" type="button">取消</button>
		</div>
	</div>
</form>

<form class="layui-form layui-form-pane" id="homeForm" lay-filter="homeForm" style="display: none;padding:5px">
	<input type="hidden" name="id" class="id"/>
	<table id="homeTable" lay-filter="homeTableFilter"></table>
</form>

<script src="/lib/layuimini2/lib/layui/layui.js" charset="utf-8"></script>
<script src="/js/common.js" charset="utf-8"></script>
<script>
	layui.use(['form', 'table', 'tree'], function () {
		var $ = layui.jquery,
			form = verifyForm(layui.form),
			tree = layui.tree,
			table = layui.table;
		var layerFormIdx, menuFormIdx, homeFormIdx;

		$(".btns .cancel").click(function () {
			layer.closeAll();
		});
		var dataTable = myTableRend(table, layer, {
			elem: '#dataTableId',
			url: '/role/listByPage',
			//toolbar: '#toolbarDemo',
			// defaultToolbar: ['filter', 'exports', 'print', {
			// 	title: '提示',
			// 	layEvent: 'LAYTABLE_TIPS',
			// 	icon: 'layui-icon-tips'
			// }],
			cols: [[
				{field: 'id', width: 80, title: 'ID', sort: true},
				{field: 'roleName', title: '角色名', align: "center"},
				{field: 'home', title: '首页', align: "center"},
				{field: 'remark', title: '备注', align: "center"},
				{title: '操作', width: 270, toolbar: '#dataTableBar', align: "center", fixed: "right"}
			]],
			limits: [10, 15, 20, 25, 50, 100],
			limit: 15,
			page: true,
			skin: 'line'
		});

		myTableRend(table, layer, {
			elem: '#homeTable',
			id: "homeTable",
			url: '/resource/listHome',
			//toolbar: '#toolbarDemo',
			// defaultToolbar: ['filter', 'exports', 'print', {
			// 	title: '提示',
			// 	layEvent: 'LAYTABLE_TIPS',
			// 	icon: 'layui-icon-tips'
			// }],
			cols: [[
				{field: 'name', title: '名称', align: "center"},
				{field: 'url', title: 'url', align: "center"},
				{field: 'remark', title: '备注', align: "center"}
			]],
			page: false,
			limit: 999,
			skin: 'line'
		});

		// 监听搜索操作
		form.on('submit(data-search-btn)', function (data) {
			//执行搜索重载
			table.reload('dataTableId', {
				page: {
					curr: 1
				}
				, where: data.field
			});

			return false;
		});

		$("#add").click(function () {
			$("#layerForm")[0].reset();
			$(".id").val("");
			layerFormIdx = layerForm(layer, $, {
				title: '添加角色',
				content: $("#layerForm"),
				type: 1,
				area: "540px",
				shade: 0.2,
				maxmin: true,
				shadeClose: false,
			});
			submitLayerForm("layerForm", '/role/add', "添加", dataTable, layerFormIdx, layui);
		});


		/**
		 * toolbar监听事件
		 */
		// table.on('toolbar(dataTableFilter)', function (obj) {
		// 	if (obj.event === 'add') {  // 监听添加操作
		// 		$("#uploadApk").removeClass("layui-hide");
		// 		$("#layerForm")[0].reset();
		// 		$("#updateType").removeAttr("checked");
		// 		$("#id").removeAttr("value");
		// 		layerFormIdx=layerForm(layer, $, {
		// 			title: '发布新版本',
		// 			content: $("#layerForm"),
		// 			type: 1,
		// 			area: "540px",
		// 			shade: 0.2,
		// 			maxmin:true,
		// 			shadeClose: false,
		// 		});
		// 		submitLayerForm("layerForm",'/app/uploadApk',"发布");
		// 	}
		// });

		//触发行单击事件
		table.on('row(homeTableFilter)', function (obj) {
			//console.log(obj.tr) //得到当前行元素对象
			//console.log(obj.data) //得到当前行数据
			myAjax($, layer, {
				url: "/role/setHome",
				type: 'POST',
				data: {
					id: $("#homeForm .id").val(),
					home: obj.data.id
				},
				dataType: "json",
				success: function (d, s) {
					if (d.code == 1) {
						layer.msg('设置成功', {icon: 1, time: 1500});
						dataTable.reload();
					}
				},
				complete: function (xhr, status) {
					layer.close(homeFormIdx);
				}
			});
		});

		table.on('tool(dataTableFilter)', function (obj) {
			if (obj.event === 'edit') {
				$("#layerForm")[0].reset();
				form.val("dataForm", obj.data);
				layerFormIdx = layerForm(layer, $, {
					title: '修改角色',
					content: $("#layerForm"),
					type: 1,
					area: "540px",
					shade: 0.2,
					maxmin: true,
					shadeClose: false,
				});
				submitLayerForm("layerForm", '/role/update', "更新", dataTable, layerFormIdx, layui);
			} else if (obj.event === 'home') {
				form.val("homeForm", obj.data);
				homeFormIdx = layerForm(layer, $, {
					title: '设置首页',
					content: $("#homeForm"),
					type: 1,
					area: "500px",
					shade: 0.2,
					maxmin: true,
					shadeClose: false,
				});
				table.resize('homeTable');
			} else if (obj.event === 'menu') {
				showTreeLayer(obj.data.id, "分配菜单", 0);
				submitTreeForm("菜单");
			} else if (obj.event === 'resource') {
				showTreeLayer(obj.data.id, "分配权限", 1);
				submitTreeForm("权限");
			} else if (obj.event === 'del') {
				layer.confirm('确定删除吗？', function (index) {
					myAjax($, layer, {
						url: "/role/del",
						type: 'POST',
						data: {
							id: obj.data.id
						},
						dataType: "json",
						success: function (d, s) {
							if (d.code == 1) {
								layer.msg('删除成功', {icon: 1, time: 1500});
								dataTable.reload();
							} else {
								layer.msg('对不起，该角色下存在用户，无法删除！', {icon: 2, time: 1500});
							}
						},
						complete: function (xhr, status) {
							layer.close(menuFormIdx);
						}
					});
					layer.close(index);
				});
			}
		});

		function showTreeLayer(id, title, type) {
			$("#permissionForm .id").val(id);
			menuFormIdx = layerForm(layer, $, {
				title: title,
				content: $("#permissionForm"),
				type: 1,
				area: "300px",
				shade: 0.2,
				maxmin: true,
				shadeClose: false,
			});
			myAjax($, layer, {
				url: "/role/listResource",
				type: 'GET',
				data: {
					id: id,
					type: type
				},
				dataType: "json",
				success: function (d, s) {
					tree.render({
						elem: '#dataTree',
						id: "dataTree",
						showCheckbox: true,
						data: d.data
					});
				}
			});
		}

		function submitTreeForm(action) {
			form.on('submit(permissionForm)', function (data) {
				let checkData = tree.getChecked('dataTree');
				let nodes = [];
				let url = "/role/saveMenu";
				if (action == "权限") {
					url = "/role/saveResource";
				}
				for (let i = 0; i < checkData.length; i++) {
					nodes.push(checkData[i]);
					getSubNode(checkData[i], nodes);
				}
				let ids = [];
				for (let i = 0; i < nodes.length; i++) {
					if (action == "权限") {
						//权限只添加叶子节点
						if (!nodes[i].children || nodes[i].children.length == 0) {
							ids.push(nodes[i].id);
						}
					} else {
						//菜单添加所有选中节点
						ids.push(nodes[i].id);
					}
				}
				if (nodes.length > 0) {
					myAjax($, layer, {
						url: url,
						type: 'POST',
						data: {
							roleId: data.field.id,
							ids: ids
						},
						dataType: "json",
						success: function (d, s) {
							if (d.code == 1) {
								layer.msg('设置成功', {icon: 1, time: 1500});
							}
						},
						complete: function (xhr, status) {
							layer.close(menuFormIdx);
						}
					});
				} else {
					layer.msg('请选择' + action, {icon: 0});
				}
				return false;
			});
		}

		/**
		 * 递归获取所有选中树形子节点
		 */
		function getSubNode(parentNode, nodes) {
			if (parentNode.children) {
				for (let i = 0; i < parentNode.children.length; i++) {
					nodes.push(parentNode.children[i]);
					getSubNode(parentNode.children[i], nodes);
				}
			}
		}

	});


</script>

</body>
</html>